<template>
  <div class="bg head_box">
    <div class="content">
      <el-row :gutter="20" align="middle">
        <el-col :span="4" :xs="12">
          <div class="logo">
            <a href="/"><img src="@/assets/logo.svg" alt="logo"></a>
          </div>
        </el-col>
        <el-col :span="16" class="hidden-xs-only">
          <ul class="nav">
            <li v-for="(item,i) in menu" :key="i">
              <router-link :to="{path:item.hash}">{{item.name}}</router-link> 
            </li>
          </ul>
        </el-col>
        <el-col :span="4" :xs="12">
          <div class="text_r">
            <span class="login">
              <router-link to="/login">登录</router-link>
            </span>
            <div @click="this.isMobile = !this.isMobile">
              <img class="meun hidden-sm-and-up" src="@/assets/img/meun.png" alt="">
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>

  <div class="eth_header_mobile" v-if="this.isMobile">
    <el-drawer
      size="50%"
      direction="ltr"
      v-model="this.isMobile"
      :with-header="false">
      <div class="nav_mb">
        <ul>
            <li v-for="(item,i) in menu" :key="i" :class="isHighlight(item.hash)?'up':''">
                <router-link :to="{path:item.hash}"><el-icon> <Menu /> </el-icon> {{item.name}}</router-link>
            </li>
        </ul>
      </div>
    </el-drawer>
  </div>
    
</template>

<script>
import { Menu } from '@element-plus/icons'
export default {
  data(){
    return{
        // name:"测试网",
        menu:[
            {name:"Download",hash:'/download'},
            {name:"长标题A",hash:'/'},
            {name:"长标题B",hash:'/'},
            {name:"长标题c",hash:'/'},
            {name:"长标题D",hash:'/'},
        ],
        isMobile:false
    }
  },
  methods:{
    isHighlight(str){
        if(window.location.hash.indexOf(str) > 0){
            return true
        }else{
            return false
        }
    },
  },
  components:{
        Menu
    },
}
</script>

<style lang="less" scoped>
  .head_box{padding: 25px 15px;}
  .bg{background: none;}
  .logo{
    img{width: auto;height: 30px;padding-top: 8px;}
  }
  
  .nav{
    display: flex;
    justify-content: center;
    align-items: center;
    li{padding: 0 20px;color: #fff;}
    a{color: #fff;}
    a:hover{
      color: rgb(154, 195, 254);
    }
  }
  .login{color: #333;background: #fff;padding:5px 10px ;border-radius: 40px;font-size: 10px;font-weight: bold;}
  .meun{height: 18px;margin-left: 20px;cursor: pointer;}
  .text_r{display: flex;justify-content: flex-end;align-items: center;}

  .eth_header_mobile ul li{
        line-height: 40px;
        .el-icon{margin-right: 5px;}
        a{
            width: 100%;
            color: #fff;
            font-size: 13px;
            display: flex;
            align-items: center;
        }
    }

  @media screen and (max-width:992px ) and (min-width:768px) {
    .nav li{
        padding: 0 10px;
    }
  }
</style>
